<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import useService from './service'
  import { ElMessage } from 'element-plus'
  import CheckParts from '@/views/order/parts/components/CheckParts.vue'
  import CheckCancelOrder from '../check-cancel-order/CheckCancelOrder.vue'
  import CheckUpdateNetwork from '../check-update-network/CheckUpdateNetwork.vue'

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
    orderNo: {
      type: String,
      required: true,
    },
    network: {
      type: String,
      required: true,
    },
    networkId: {
      type: String,
      required: true,
    },
    emp: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
    (e: 'updateCostList'): void
    (e: 'updatePartList'): void
  }>()

  // 弹窗状态
  const visible = ref(false)

  // 使用服务
  const { get, loading, pendingPreviewEventList } = useService

  /**
   * 显示弹窗事件
   */
  const onShowModal = () => {
    if (pendingPreviewEventList.value.length <= 0) {
      ElMessage({
        type: 'warning',
        message: '暂无待处理事项',
        duration: 5000,
        showClose: true,
        plain: true,
      })
      return false
    }
    visible.value = true
  }

  /**
   * 获取数据方法
   */
  const getData = async () => {
    await get(props.orderId)
    if (pendingPreviewEventList.value.length <= 0) {
      visible.value = false
    }
  }

  // 审核物料弹窗显示状态
  const checkPartsModalVisible = ref(false)

  // 物料id
  const partsId = ref('')

  /**
   * 显示或隐藏物料审核弹窗
   * @param {boolean} visible - 弹窗的显示状态
   * @param {string} id 物料id
   */
  const onShowOrHideCheckPartModal = (visible: boolean, id = '') => {
    checkPartsModalVisible.value = visible
    partsId.value = id
  }

  // 取消工单弹窗显示状态
  const orderCancelModalVisible = ref(false)

  // 审核申请改派网点弹窗显示状态
  const checkUpdateNetworkVisible = ref(false)

  /**
   * 去审核按钮点击事件
   * @param type - 4.取消工单申请 5.改派网点申请 6.工单挂起申请
   */
  const handleToCheckClick = (type: number) => {
    if (type === 4) {
      orderCancelModalVisible.value = true
    }
    if (type === 5) {
      checkUpdateNetworkVisible.value = true
    }
  }

  /**
   * 物料列表更新事件
   */
  const onUpdatePartList = () => {
    getData()
    emits('updatePartList')
  }

  /**
   * 更新方法
   */
  const onUpdate = () => {
    getData()
    emits('update')
  }

  onMounted(() => {
    getData()
  })

  defineExpose({
    getData,
  })
</script>

<template>
  <div>
    <HPlainButton type="warning" :loading="loading" @click="onShowModal">
      待处理{{ pendingPreviewEventList.length ? `(${pendingPreviewEventList.length})` : '' }}
    </HPlainButton>
    <HDialog v-model="visible" :width="800">
      <template #title>
        <div style="display: flex; align-items: center; font-size: 14px; gap: 5px">
          <span>{{ `此工单有${pendingPreviewEventList.length}条事项待处理` }}</span>
        </div>
      </template>
      <div class="wait_handle_dialog_content">
        <div
          v-for="event in pendingPreviewEventList"
          :key="event.id"
          style="display: flex; justify-content: space-between; align-items: center"
        >
          <div style="display: flex; align-items: center; gap: 5px">
            <span>
              <template v-if="event.type === 2">工单物料</template>
              <template v-else-if="event.type === 4">取消工单申请</template>
              <template v-else-if="event.type === 5">改派网点申请</template>
              <template v-else-if="event.type === 6">工单挂起申请</template>
            </span>
            <template v-if="event.type === 2">
              <HLink @click="onShowOrHideCheckPartModal(true, event.id)">
                <span style="width: 140px; text-align: left; font-size: 14px">
                  {{ event.code }}
                </span>
              </HLink>
            </template>
            <HLink
              v-else-if="[4, 5, 6].includes(event.type)"
              @click="handleToCheckClick(event.type)"
            >
              <span style="width: 140px; text-align: left; font-size: 14px"> 去审核 </span>
            </HLink>
            <span v-if="event.type === 2">待审核</span>
          </div>
          <div v-if="event.applyTime"> 申请时间：{{ event.applyTime }} </div>
        </div>
      </div>
      <template #footer>
        <HButton is-modal @click="visible = false">关闭</HButton>
      </template>
    </HDialog>

    <!-- 审核物料弹窗 -->
    <CheckParts
      v-model="checkPartsModalVisible"
      :work-id="props.orderId"
      :parts-id="partsId"
      :network-id="props.networkId"
      @update-list="onUpdatePartList"
    />

    <!--改派网点弹窗-->
    <CheckUpdateNetwork
      v-model="checkUpdateNetworkVisible"
      :network="props.network"
      :network-id="props.networkId"
      :order-id="props.orderId"
      @update="onUpdate"
    />

    <!--取消工单申请-->
    <CheckCancelOrder
      v-model="orderCancelModalVisible"
      :order-id="props.orderId"
      @updated="onUpdate"
    />
  </div>
</template>

<style lang="scss">
  .wait_handle_dialog_content {
    box-sizing: border-box;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    row-gap: 12px;
    flex-wrap: wrap;
  }
</style>
